<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css" media="screen">
    *{margin:0;padding:0;}
    #wrap{margin:10px auto; width:80%; height:99%;}
    .unit{margin-bottom:5px; padding:5px; border:solid 1px #000; height:auto;  clear:both;box-sizing:border-box;}
    .unit label{text-align:right;width:100px;line-height: 30px; display:inline-block;}
    .unit input{line-height: 30px; width:100px; height:30px;}
    .log {font-size:11px; font-family:Courier; overflow: auto; height:100%; background:lavenderblush;width:85%;float:left}
    .log p{padding:2px;margin:0;}
    .content{width:100%;overflow:hidden;height:80%;margin:0 0 5px 0;}
    .online{width: 15%;height: 100%;float:right;background: #FCFCFC;border:solid 1px #000;box-sizing:border-box;}
</style>
<script src="./js/jquery.min.js"></script>
<script type="text/javascript">

    var socketInit = {
        socket:null,
        logDiv: null,
        currUser:{}, // 当前用户
        connectSocket:function(){  // 链接socket
            var self = this;
            var username = document.getElementById("username").value;
            if(username == ""){
                alert("请输入用户名！");
                return;
            }
            if(self.currUser.username != undefined){
                alert("已经登录了，请先下线在登录");
                return;
            }
            var host = window.location.host;
            var url = "ws://"+host+"/javax/websocket";
            self.socket = new WebSocket(url);
            // 链接建立成功的回调
            self.socket.onopen = function(){
                self.logDiv = document.getElementById('logs');
                self.logDiv.innerHTML+="<font color='green' size='1'>连接成功...</font><br>";
                self.currUser.username = username;
                this.send(self.currUser.username+"上线啦！")
            }
            // 链接建立错误的回调
            self.socket.onerror = function(){

            }
            // 收到消息的回调
            self.socket.onmessage = function(event){
                var data = event.data;
                self.logDiv.innerHTML+="<font color='green' size='1'>"+data+"</font><br>";
            }
            // 链接关闭的回调
            self.socket.onclose = function(){
                self.logDiv.innerHTML+="<font color='green' size='1'>关闭连接...</font><br>";
                self.send("下线啦！")
            }
            // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket链接，防止链接还没有断开就关闭窗口，server端会抛异常
            window.onbeforeunload = function(){
                self.socket.close();
            }
        },
        closeWebSocket:function(){ // 关闭链接
            if(this.socket == null){
                alert("请您先登录！")
                return;
            }
            this.socket.close()
        },
        send:function(content){  // 发送消息
            this.socket.send(content);
        }
    }
</script>
</head>
<body>
<div id="wrap" style="height:600px;">
    <div class="unit">
        <label >用户名:</label>
        <input  id="username" value=""/>
        <label style="width: 60px;">密码:</label>
        <input  id="password" value ="123"/>
        <input onclick="javascript:socketInit.connectSocket();"  type="button" value="登录" />
        <input onclick="javascript:socketInit.closeWebSocket();" type="button" value="退出" />
        <input onclick="javascript:showServerConfig(this);" type="button" value="服务器配置" />
    </div>
    <div class="unit" id="serverConfigId" style="display: none;">
        <label >服务器IP:</label>
        <input  id="serverIp" value="192.168.1.235"/>
        <label>端口号:</label>
        <input  id="port" value ="8888"/>
    </div>
    <div class="unit">
        <label>聊天记录:</label>
        <input type="button" value="清空记录" onclick="clearLogs();"/>
        <input type="button" value="鉴权命令" onclick="authCmd();"/>
        <input type="button" value="心跳命令" onclick="heartbeatCmd();"/>
        <input type="button" value="获取指定好友历史消息" onclick="friendHistoryCmd();" style="width: 150px;"/>
        <input id="history_friend_id" style="width:100px;" placeholder="输入好友ID"/>
        <input type="button" value="获取指定群组历史消息" onclick="groupHistoryCmd();" style="width: 150px;"/>
        <input id="history_group_id" style="width:100px;" placeholder="输入群组ID"/>
    </div>
    <div class="content">
        <div id="logs" class="unit log">
        </div>
        <div id="onlinePanel" class="online">
            &nbsp;在线成员(0/0)
        </div>
    </div>
    <div class="unit">
        <label >输入内容:</label>
        <input id="content" style="width:500px;" onkeydown="keyDown(event)"/>
        <input onclick="javascript:sendGroup()" id="sendGroupBtn"  type="button"  value="群聊" />&nbsp;<input onclick="javascript:send()" id="sendBtn"  type="button"  value="私聊" />
    </div>
</div>
</body>
</html>